<template>
  <div class="contenter">
    <!-- 第一块 数字人视频制作 -->
    <div class="one">
      <!-- 外面设置 弹性居中 -->
      <div class="centerText">
        <div class="left">
          <h1>数字人视频制作</h1>
          <p>一键将文本合成视频，轻松批量制作</p>
          <el-button type="primary" round>立即制作</el-button>
        </div>

        <div class="right">
          <img src="../assets/img/bgPic.png" alt="">
        </div>
      </div>
    </div>




    <!-- 第二块 轻松四步制作数字人视频 -->
    <div class="two">
      <div class="centerText">
        <!-- 第二块 轻松四步制作数字人视频(文字通用代码) -->
        <div class="contenter_title">
          <p>轻松4步制作数字人视频</p>
        </div>

        <div class="content_bottom">
          <!-- 数字人下方 左侧 -->
          <div class="contentL">

            <!-- 第一个 -->
            <div class="section">
              <div class="left">
                01
              </div>

              <div class="center">
                <div class="top">
                  点击创建项目
                </div>
                <div class="bottom">
                  选择现有模板或者点击“创建项目”，开启你的内容创作。
                </div>
              </div>

              <div class="right">
                →
              </div>
            </div>

            <!-- 第二个 -->
            <div class="section">
              <div class="left">
                02
              </div>

              <div class="center">
                <div class="top">
                  选择数字人并输入文本
                </div>
                <div class="bottom">
                  选择合适的数字人形象并输入语音文本，可进行自定义调整。
                </div>
              </div>

              <div class="right">
                →
              </div>
            </div>
            <!-- 第三个 -->
            <div class="section">
              <div class="left">
                03
              </div>

              <div class="center">
                <div class="top">
                  编辑背景
                </div>
                <div class="bottom">
                  点击编辑背景进行背景文本及背景动画编辑，可自行创作背景内容。
                </div>
              </div>

              <div class="right">
                →
              </div>
            </div>
            <!-- 第四个 -->
            <div class="section">
              <div class="left">
                04
              </div>

              <div class="center">
                <div class="top">
                  导出视频
                </div>
                <div class="bottom">
                  选择现有模板或者点击“创建项目”，开启你的内容创作。
                </div>
              </div>

              <div class="right">
                →
              </div>
            </div>
            
          </div>

          <!-- 数字人下方 右侧 -->
          <div class="contentR">

          </div>
        </div>




      </div>


    </div>

    <!-- 第三块 璟宸毓颠覆传统视频制作 -->
    <div class="three">
      <div class="centerText">
        <div class="contenter_title">
          <p>璟宸毓颠覆传统视频制作</p>
        </div>
      </div>
    </div>

    <!-- 第四块 数字人8大应用场景，省钱省时间 -->
    <div class="four">
      <div class="centerText">
        <div class="contenter_title">
          <p>数字人8大应用场景，省钱省时间</p>
        </div>
      </div>
    </div>

    <!-- 第五块 100+服务型数字人，24小时在线候命-->
    <div class="five">
      <div class="centerText">
        <div class="contenter_title">
          <p>100+服务型数字人，24小时在线候命</p>
        </div>
      </div>
    </div>

    <!-- 第六块 一键开启你的元宇宙体验之旅 -->
    <div class="six">
      <div class="centerText">
        <div class="contenter_title">
          <p>一键开启你的元宇宙体验之旅</p>
        </div>
      </div>
    </div>



  </div>
</template>

<script>
export default {
  props: {

  },
  data() {
    return {

    };
  },
  created() {

  },
  methods: {

  },
  components: {

  },
};
</script>

<style scoped lang="less">
// 第二块 轻松四步制作数字人视频(文字通用代码)
.contenter_title {
  height: 200px;
  // background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 48px;
  font-weight: 700;
  color: #222831;
}

// 内容主体部分  width 1200px
.centerText {
  width: 1200px;
  background-color: #CDB79E;

}




.contenter {
  width: 100%;
  height: 4400px;
  background-color: #e2a9a9;

  // 第一块 数字人视频制作
  .one {
    width: 100%;
    height: 580px;
    background-color: #040D1E;
    color: white;
    // background: url(../assets/img/bgPic.png) no-repeat;
    display: flex;
    // justify-content: space-between;
    // justify-content: center;
    // justify-content: right;
    display: flex;
    justify-content: center;

    .centerText {
      width: 1200px;
      display: flex;
      justify-content: space-between;
      position: relative;
      // background-color: #CDB79E;

      // background-color: #965d5d;
      .left {
        width: 700px;
        height: 500px;
        // background-color:rgba(rgba(209, 168, 168, 0.4));
        position: absolute;
        left: 0px;
        z-index: 2;
        // left: 10%;
        // float: left;

        h1 {
          // width: 700px;
          font-size: 72px;
          font-weight: 600;
          margin-top: 150px;
        }

        p {
          font-size: 22px;
          margin-top: 32px;

        }

        .el-button {
          width: 220px;
          height: 56px;
          border-radius: 28px;
          box-shadow: 0 10px 28px #5b83ff4d;
          margin-top: 60px;
        }
      }

      .right {
        position: absolute;
        height: 100%;
        top: 0;
        right: -360px;

        img {
          height: 100%;
          // position: absolute;
        }
      }
    }



  }



  // 第二块 轻松四步制作数字人视频
  .two {
    height: 762px;
    background-color: #fff;
    display: flex;
    justify-content: center;

    .centerText {
      background-color: #c38b8b;
      padding-bottom: 100px;

      .content_bottom {
        display: flex;
        justify-content: space-between;


        .section {
          width: 400px;
          height: 116px;
          background-color: #d1a5a5;

          // color: white;
          // font-size: 34px;

          display: flex;
          justify-content: space-evenly;
          align-items: center;

          .left {
            font-size: 35px;
            font-weight: 600;
            color: #222831;
          }

          .center {
            width: 230px;
            height: 80px;

            .top {
              font-size: 20px;
              font-weight: 600;
              color: #222831;
              padding-bottom: 8px;
            }

            .bottom {
              font-size: 14px;
              font-weight: 400;
              color: #848c96;
            }
          }

          // .right{
          //   font-weight: 600;
          // }
        }


        .contentR {
          background-color: #DDA0DD;
          width: 740px;
          height: 464px;
        }
      }
    }



    // 第二块 轻松四步制作数字人视频(文字通用代码)
    // .contenter_title {
    //   height: 200px;
    //   background-color: white;
    //   display: flex;
    //   justify-content: center;
    //   align-items: center;
    //   font-size: 48px;
    //   font-weight: 700;
    //   color: #222831;
    // }
  }

  // 第三块 璟宸毓颠覆传统视频制作
  .three {
    height: 729px;
    background-color: #F3F7FD;
    display: flex;
    justify-content: center;
  }

  // 第四块 数字人8大应用场景，省钱省时间
  .four {
    height: 724px;
    background-color: #fff;
    display: flex;
    justify-content: center;
  }

  // 第五块 100+服务型数字人，24小时在线候命
  .five {
    height: 1114px;
    background-color: #F3F7FD;
    display: flex;
    justify-content: center;
  }

  // 第六块 一键开启你的元宇宙体验之旅
  .six {
    height: 324px;
    background-color: #fff;
    display: flex;
    justify-content: center;
  }









}
</style>
